<template>
  <div class="table-container">
    <el-table
      ref="tableSort"
      v-loading="listLoading"
      :data="list"
      :element-loading-text="elementLoadingText"
      :height="height"
      @selection-change="setSelectRows"
    >
      <!-- <el-table-column show-overflow-tooltip type="selection" width="55" /> -->
      <el-table-column label="序号" show-overflow-tooltip width="95">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="护肤目标" prop="target" show-overflow-tooltip />
      <el-table-column label="维度" prop="name" show-overflow-tooltip />

      <el-table-column label="操作" show-overflow-tooltip width="180px">
        <template #default="{ row }">
          <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
          <!-- <el-button type="text" @click="handleDelete(row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { doDelete, getStrategyList } from '@/api/configration'
  // import TableEdit from './components/TableEdit'

  export default {
    name: 'StrategyIndex',
    components: {
      // TableEdit,
    },

    data() {
      return {
        imgShow: true,
        list: [],
        apiData: [],
        imageList: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        background: true,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 20,
          title: '',
        },
      }
    },
    computed: {
      height() {
        return this.$baseTableHeight()
      },
    },
    created() {
      this.fetchData()
    },
    beforeDestroy() {},
    mounted() {},
    methods: {
      setSelectRows(val) {
        this.selectRows = val
      },
      handleAdd() {
        this.$refs['edit'].showEdit()
      },
      handleEdit(row) {
        // this.$refs['edit'].showEdit(row)
        this.$store.commit('config/setStrategyRow', row)
        this.$router.push({
          name: 'details',
          query: {
            targetIndex: row.targetIndex,
            indexsIndex: row.indexsIndex,
          },
        })
      },

      async fetchData() {
        this.listLoading = true
        this.$store
          .dispatch('config/getStrategyList', this.form)
          .then((data) => {
            console.log('config/getStrategyList', data)
            this.apiData = data
            let dataArr = []
            if (data && Array.isArray(data) && data.length > 0) {
              data.map((mapItem, targetIndex) => {
                if (mapItem && typeof mapItem === 'object') {
                  if (mapItem.index && Array.isArray(mapItem.index)) {
                    let indexs = mapItem.index
                    indexs.map((it, indexsIndex) => {
                      dataArr.push({
                        target: mapItem.target,
                        name: it.name,
                        targetIndex,
                        indexsIndex,
                        list: it,
                      })
                    })
                  }
                }
              })
            }
            this.list = dataArr

            this.total = this.list.length
            setTimeout(() => {
              this.listLoading = false
            }, 500)
          })
          .catch()
      },
    },
  }
</script>
